<!--
 * @Author: fishroom
 * @Date: 2021-07-26 21:22:14
 * @LastEditTime: 2021-12-09 17:08:31
 * @FilePath: \website\src\components\common\canvas\Canvas.vue
-->
<template>
  <div class="hello">
    <canvas
      class="canvas"
      ref="canvas"
      style="background: linear-gradient(rgb(0, 33, 114), rgb(71, 156, 213))"
    ></canvas>
  </div>
</template>

<script>
let canvas;
let c;
export default {
  name: "HelloWorld",
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      canvas = this.$refs.canvas;
      canvas.style.background = "linear-gradient( to bottom, #002172, #479CD5)";
      const randomInt = (min, max) =>
        Math.floor(Math.random() * (max - min) + min);
      // get canvas
      // 动态设置canvas发宽高
      window.addEventListener("resize", refreshSize, false);
      var _w, _h;
      function refreshSize() {
        _w = canvas.width = window.innerWidth;
        _h = canvas.height = window.innerHeight;
      }
      refreshSize();
      // set width and height to canvas

      c = canvas.getContext("2d");
      // get context now you can draw from here
      class Flower {
        constructor(x, y, radius) {
          this.x = x;
          this.y = y;
          this.radius = radius;
          this.dx = 0.8 + Math.random() * 0.2;
          this.fdx = Math.pow(this.dx, 15);
          this.radians = 0;
        }
        draw() {
          // 设置蒲公英的大小
          let long = this.radius * 7;
          let cutLong = long / 4;
          c.beginPath();
          c.strokeStyle = "#fff";
          c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
          c.moveTo(this.x, this.y + this.radius);
          c.lineTo(this.x, this.y + long);
          c.stroke();
          c.beginPath();
          c.save();
          c.strokeStyle = "#725527";
          c.lineWidth = cutLong;
          c.lineCap = "round";
          c.moveTo(this.x, this.y + long - cutLong);
          c.lineTo(this.x, this.y + long + cutLong);
          c.stroke();
          c.restore();
          c.beginPath();
          c.save();
          c.globalAlpha = 0.5;
          for (let i = 0.5; i < 5; i++) {
            c.moveTo(this.x, this.y);
            c.quadraticCurveTo(
              this.x + cutLong,
              this.y + cutLong,
              this.x + cutLong * i,
              this.y - cutLong * 1.5
            );
            c.moveTo(this.x, this.y);
            c.quadraticCurveTo(
              this.x - cutLong,
              this.y + cutLong,
              this.x - cutLong * i,
              this.y - cutLong * 1.5
            );
          }
          c.lineWidth = 1;
          c.stroke();
          c.restore();
        }
        createFlower(array = []) {
          let i = array.indexOf(this);
          array.splice(i, 1);
          let x = 0;
          let y = randomInt(-10, _h * 1.5);
          array.push(new Flower(x, y, this.radius));
        }
        update(array = []) {
          if (this.x - this.radius > _w) this.createFlower(array);
          this.radians += 0.01;
          this.x += this.dx;
          this.y += Math.cos(this.radians) - this.fdx;
          this.draw();
        }
      }

      var flowers = [];

      function init() {
        for (let i = 0; i < 100; i++) {
          let x = Math.random() * _w;
          let y = randomInt(-10, _h * 1.5);
          flowers.push(new Flower(x, y, 1));
        }
      }
      init();
      // a IIFE

      function loop() {
        requestAnimationFrame(loop);
        refreshSize();
        flowers.forEach((f) => f.update(flowers));
      }
      loop();
      // loop to animate
    },
  },
};
</script>

<style scoped>
.hello {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}
.canvas {
  display: block;
  position: absolute;
  margin: 0;
  padding: 0px;
  border: 0px;
  outline: 0px;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
</style>
